<template>
  <div id="train-ticket-create">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/train/tickets">火车票</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">新建</li>
      </ol>
    </nav>

    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <form id="frmUser" role="form" class="form-horizontal">
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 企业 </label>
              <div class="col-9">
                <my-select-customer
                  :minId="0"
                  :status="1"
                  :customerId.sync="customerId"
                ></my-select-customer>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 乘客姓名 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="psgName" />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 火车班次 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="trainNo" />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 出发地 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="dcity" />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 目的地 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="acity" />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 日期 </label>
              <div class="col-9">
                <my-date-picker
                  id="ddate"
                  v-model="ddate"
                  sizing="sm"
                ></my-date-picker>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 座位等级 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="seatClass" />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 成本价 </label>
              <div class="col-9">
                <input
                  type="text"
                  class="form-control"
                  v-model.number="price"
                />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 服务费 </label>
              <div class="col-9">
                <input
                  type="text"
                  class="form-control"
                  v-model.number="serviceCharge"
                />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 实收客户 </label>
              <div class="col-9">
                <input
                  type="text"
                  class="form-control"
                  v-model.number="amount"
                />
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end">供应商</label>
              <div class="col-9">
                <my-select-supplier
                  :supplierId.sync="supplierId"
                ></my-select-supplier>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end">支付方式</label>
              <div class="col-9">
                <my-select-payment
                  :paymentId.sync="paymentId"
                ></my-select-payment>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-3 text-end"> 备注 </label>
              <div class="col-9">
                <input type="text" class="form-control" v-model="remark" />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <div class="form-check me-auto">
            <input
              class="form-check-input"
              type="checkbox"
              v-model="keepOpening"
            />
            <label class="form-check-label"> 保存成功后继续录入 </label>
          </div>

          <button
            type="button"
            class="btn btn-success btn-lg"
            @click.stop="createTicket($event.target)"
          >
            保存
          </button>
          <button
            type="button"
            class="btn btn-secondary btn-sm ms-5"
            @click.stop="cancel()"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import MyDatePicker from "@/components/my-datepicker.vue";

import MySelectCustomer from "@/components/my-select2-customer.vue";

import { createTrainTicket } from "@/api/train.js";
import MySelectSupplier from "@/components/my-select-supplier.vue";
import MySelectPayment from "@/components/my-select-payment.vue";

export default {
  components: {
    MyDatePicker,
    MySelectCustomer,
    MySelectSupplier,
    MySelectPayment,
  },
  data() {
    return {
      customerId: 0,
      psgName: "",
      trainNo: "",
      dcity: "",
      acity: "",
      ddate: "",
      seatClass: "",
      price: 0,
      serviceCharge: 0,
      amount: 0,
      remark: "",
      supplierId: 0,
      paymentId: 0,

      keepOpening: false,
    };
  },
  watch: {
    amount: function () {
      this.serviceCharge = this.amount - this.price;
    },
    serviceCharge: function () {
      this.amount = this.price + this.serviceCharge;
    },
    price: function () {
      this.amount = this.price + this.serviceCharge;
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    createTicket: function (btn) {
      $(btn).attr("disabled", true);
      const params = {
        customerId: this.customerId,
        psgName: this.psgName,
        trainNo: this.trainNo,
        dcity: this.dcity,
        acity: this.acity,
        ddate: this.ddate,
        seatClass: this.seatClass,
        price: this.price,
        serviceCharge: this.serviceCharge,
        remark: this.remark,
        supplierId: this.supplierId,
        paymentId: this.paymentId,
      };

      createTrainTicket(
        params,
        (v) => {
          if (v.status !== "OK") {
            this.showErrMsg(v.errmsg, "danger");
          } else if (this.keepOpening === false) {
            this.$router.push("/train/tickets");
          } else {
            this.showErrMsg("保存成功，请继续录入");
            this.psgName = "";
          }
        },
        () => {
          $(btn).attr("disabled", false);
        }
      );
    },
    reset: function () {
      this.customerId = 0;
      this.psgName = "";
      this.trainNo = "";
      this.dcity = "";
      this.acity = "";
      this.ddate = "";
      this.seatClass = "";
      this.price = 0;
      this.serviceCharge = 0;
      this.remark = "";
    },
    cancel: function () {
      this.$router.push("/train/tickets");
    },
  },
};
</script>